<!DOCTYPE html>
<html>
<head>
	<title>渐变背景图案</title>
</head>
<style type="text/css">
	*{
		margin: 0px;
		padding: 0px;
	}
	body{
		text-align: center;
	}
	div.t1{
		margin-left: 120px;
		text-align: center;
		width: 80%;
		height: 400px;
		/*最重要代码*/
		background: linear-gradient(to left,#d3959b,#bfe6ba);
	}
	div.t2{
		margin-left: 120px;
		margin-top:20px; 
		text-align: center;
		width: 80%;
		height: 400px;
		background: linear-gradient(to right,#d3959b,#bfe6ba);
	}
	div.t3{
		margin-left: 120px;
		margin-top:20px; 
		text-align: center;
		width: 80%;
		height: 400px;
		background: linear-gradient(to top,#d3959b,#bfe6ba);
	}
	div.t4{
		margin-left: 120px;
		margin-top:20px; 
		text-align: center;
		width: 80%;
		height: 400px;
		background: linear-gradient(to right top,#d3959b,#bfe6ba);
	}
	div.t5{
		margin-left: 120px;
		margin-top:20px; 
		text-align: center;
		width: 80%;
		height: 400px;
		background: linear-gradient(to right,#feac5e,#c779d0,#4bc0c8);
	}
	div.t6{
		margin-left: 120px;
		margin-top:20px; 
		text-align: center;
		width: 80%;
		height: 400px;
		background: linear-gradient(45deg,#feac5e,#c779d0,#4bc0c8);
	}
	div.t7{
		margin-left: 120px;
		margin-top:20px; 
		text-align: center;
		width: 80%;
		height: 400px;
		background: linear-gradient(45deg,rgba(254,172,94,0.5),rgba(199,121,208,0.5),rgba(75,192,200,0.5));
	}
</style>
<body>
	<img src="https://img2018.cnblogs.com/blog/1442391/201810/1442391-20181016110448276-122585072.png">
	<div class="t1">渐变颜色1:to left 设置渐变从右到左，相当于270deg</div>
	<div class="t2">渐变从右到左</div>
	<div class="t3">渐变从下到上</div>
	<div class="t4">渐变从左下到右上</div>
	<img src="https://img2018.cnblogs.com/blog/1442391/201810/1442391-20181016113030369-144448590.png" alt="失效图片">
	<div class="t5">三种颜色渐变</div>
	<div class="t6">45°角度变换颜色</div>
	<div class="t7">使用了RGBA为0.5透明度</div>
</body>
</html>